<template>
	<view>
		<view class="details">
			<view class="situation">
				<view class="lists" v-for="(item,index) in situationList" :key="index" @click="selectTap(index)">
					<image :src=" currentTab == index ? item.src1 : item.src" mode=""></image>
					<text :class=" currentTab == index ? 'active' : ''">{{item.name}}</text>
				</view>
			</view>
			<view class="content-box" v-for="(item,index) in situationList" :key="index" v-show="currentTab == index">
				<view :class="[circles,(index==0?'pos0':(index==1?'pos1':'pos2'))]"></view>
				<view class="content">
					<view class="times-box">
						<view class="times">
							{{item.times}}
						</view>
						<view>
							<view class="content-color" v-for="(items,index1) in item.stateList" :key="index1">{{items.times}}</view>
						</view>
					</view>
					<view class="range-box">
						<view class="times">
							{{item.range}}
						</view>
						<view>
							<view class="content-color" v-for="(items,index1) in item.stateList" :key="index1">{{items.times}}</view>
						</view>
					</view>
					<view class="status-box" v-if="item.status!=''">
						<view class="times">
							{{item.status}}
						</view>
						<view>
							<view class="content-color" v-for="(items,index1) in item.stateList" :key="index1">{{items.times}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'todayContent',
		props: ['situationList','currentTab'],
		data() {
			return {
				circles:'circles',
				pos0:'pos0',
				pos1:'pos1',
				pos2:'pos2',
			}
		},
		methods: {
			selectTap(index) {
				this.$emit("parentSelectTap", index);
				// this.currentTab = index;
			}
		}
	}
</script>

<style lang="less">
	@blue: #00ABC0;
	@bluet: #6CD2DF;

	.details {
		background: #fff;
		// border: 1px solid #f2f2f2;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		margin-top: -50rpx;
	}
	
	.situation {
		display: flex;
		justify-content: space-around;
		padding: 0 30rpx;
	
		.lists {
			margin-top: -40rpx;
	
			image {
				width: 120rpx;
				height: 119rpx;
				// display: block;
			}
	
			text {
				display: block;
				font-size: 24rpx;
				color: #E4F5F9;
				text-align: center;
			}
		}
	}
	
	.active {
		color: #22A1B3 !important;
	}
	
	.pos0{
		margin-left: 0rpx;
	}
	
	.pos1{
		margin-left: 240rpx;
	}
	
	.pos2{
		margin-left: 480rpx;
	}
		
	
	.circles {
		width: 132rpx;
		height: 66rpx;
		// border: 1px solid #F5F5F5;
		position: relative;
		border-bottom: 1px solid #fff;
		background-color: #fff;
		border-radius: 100px 100px 0 0;
		-moz-box-shadow:0px -2px 2px #DDDDDD; -webkit-box-shadow:0px -2px 2px #DDDDDD; box-shadow:0px -2px 2px #DDDDDD;
	}
	
	.content-box {
		width: 614rpx;
		height: auto;
		margin: 30rpx auto;
		.content {
			width: 100%;
			padding: 20rpx;
			// border: 1px solid #F5F5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			-moz-box-shadow:0px 0px 5px #DDDDDD; -webkit-box-shadow:0px 0px 5px #DDDDDD; box-shadow:0px 0px 5px #DDDDDD;
			margin-top: -4rpx;
			// height: auto;
			
			.times-box,.range-box,{
				display: flex;
				border-bottom:1px solid @bluet;
				padding: 20rpx 0;
			}
			
			.status-box{
				display: flex;
				padding: 20rpx 0;
			}
			
			.content-color{
				color: #01ACC0;
				font-size: 26rpx;
				font-weight: 600;
				line-height: 40rpx;
			}
			
			.times{
				width: 125rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-size: 26rpx;
				background-color: @bluet;
				border-radius: 8rpx;
				margin-right: 40rpx;
			}
		}
	}
</style>
